<template>
  <!--pages/user_spread/user_spread.wxml-->
  <view class="user-spread">
    <!-- #ifndef  H5 -->
    <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
      <u-navbar
          :is-back="true"
          title="申请服务商"
          :title-bold="true"
          :is-fixed="false"
          title-color="#000000"
          :border-bottom="false"
          back-icon-name="arrow-leftward"
          back-icon-color="#000000"
          :background="{ background: 'rgba(256,256, 256,0)' }"
      ></u-navbar>
    </u-sticky>
    <!-- #endif -->
    <loading-view v-if="showLoading"></loading-view>
    <view class="main" v-if="!showLoading">
      <!-- 填表格 -->
      <view :hidden="!vipState==0" class="user-apply-box">
        <form>
          <view class="user-apply-vip column-center apply-vip-top">
            <view class="vip-form">
              <view class="form-item row">
                <view class="label nr">申请人资质：</view>
                <u-radio-group v-model="qualification" size="28">
                  <u-radio value="1" :name="'1'">个人</u-radio>
                  <u-radio value="2" :name="'2'">企业</u-radio>
                </u-radio-group>
              </view>
            </view>
          </view>
          <view class="user-apply-vip column-center apply-vip-bottom" v-if="qualification === '1'">
            <view class="vip-form">
              <!-- 个人申请字段 -->

              <view class="form-item row">
                <view class="label nr">申请人姓名：</view>
                <input class="nr" name="real_name" v-model="realName" placeholder="请输入您的姓名"></input>
              </view>
              <view class="form-item row">
                <view class="label nr">申请人手机号：</view>
                <input class="nr" name="mobile" v-model="mobile" placeholder="请输入您的手机号码"></input>
              </view>
              <view class="form-item row">
                <view class="label nr">申请人邮箱：</view>
                <input class="nr" name="email" v-model="email" placeholder="请输入您的邮箱"></input>
              </view>
              <view @click="showRegion=true">
                <view class="form-item row">
                  <view class="label nr">申请人地址：</view>
                  <input class="nr" name="region" :value="region" disabled type="text"
                         placeholder="请选择省、市、区"></input>
                  <image class="icon-sm mr10" src="/static/images/arrow_right.png"/>
                </view>
              </view>
              <view class="form-item row">
                <view class="label nr">详细地址：</view>
                <input class="nr" name="address" v-model="address" placeholder="请输入详细地址"></input>
              </view>
            </view>
          </view>
          <view class="user-apply-vip column-center" v-if="qualification === '1'">
            <view class="vip-form">
              <view class="form-item row">
                <view class="label nr" style="width: 230rpx">申请人身份证号：</view>
                <input class="nr" name="idCard" v-model="idCard" placeholder="请输入身份证号码"></input>
              </view>
              <view class="form-item ">
                <view class="label nr" style="width: 500rpx;margin-bottom: 20rpx">申请人身份证照片
                  <text>(注：正反身份证)</text>
                </view>
                <view class="row card-images">
                  <uploader
                      preview-size="180rpx"
                      :mutiple="false"
                      :maxUpload="1"
                      :file-list="idCardFrontFileList"
                      @after-read="afterReadIdCardFront"
                      :deletable="true"
                      label="上传人像面"
                      image-fit="aspectFill"
                      @delete="onDeleteIdCardFront"
                  />

                  <uploader
                      preview-size="180rpx"
                      :mutiple="false"
                      :maxUpload="1"
                      :file-list="idCardBackFileList"
                      @after-read="afterReadIdCardBack"
                      :deletable="true"
                      label="上传国徽面"
                      image-fit="aspectFill"
                      @delete="onDeleteIdCardBack"
                  />
                </view>
              </view>
            </view>
          </view>

          <view class="user-apply-vip column-center apply-vip-bottom" v-if="qualification === '2'">
            <view class="vip-form">
              <!-- 企业申请字段 -->
              <view class="form-item row">
                <view class="label nr">企业名称：</view>
                <input class="nr" name="companyName" v-model="companyName" placeholder="请输入企业名称"></input>
              </view>
              <view @click="showRegion=true">
                <view class="form-item row">
                  <view class="label nr">企业地址：</view>
                  <input class="nr" name="companyRegion" :value="region" disabled type="text"
                         placeholder="请选择省、市、区"></input>
                  <image class="icon-sm mr10" src="/static/images/arrow_right.png"/>
                </view>
              </view>
              <view class="form-item row">
                <view class="label nr">详细地址：</view>
                <input class="nr" name="companyAddress" v-model="companyAddress" placeholder="请输入详细地址"></input>
              </view>
              <view class="form-item">
                <view class="label nr" style="margin-bottom: 20rpx">企业执照照片：</view>
                <uploader
                    preview-size="180rpx"
                    :mutiple="false"
                    :maxUpload="1"
                    :file-list="businessLicenseFileList"
                    @after-read="afterReadBusinessLicense"
                    :deletable="true"
                    label="上传营业执照"
                    image-fit="aspectFill"
                    @delete="onDeleteBusinessLicense"
                />
              </view>
            </view>
          </view>
          <view class="user-apply-vip column-center" v-if="qualification == '2'">
            <view class="vip-form">
              <view class="form-item row">
                <view class="label nr">法人姓名：</view>
                <input class="nr" name="legalPersonName" v-model="legalPersonName"
                       placeholder="请输入法人姓名"></input>
              </view>
              <view class="form-item row">
                <view class="label nr">法人手机号：</view>
                <input class="nr" name="legalPersonMobile" v-model="legalPersonMobile"
                       placeholder="请输入法人手机号"></input>
              </view>
            </view>
          </view>
          <view class="user-apply-vip column-center" v-if="qualification == '2'">
            <view class="vip-form">
              <view class="form-item row">
                <view class="label nr">管理员姓名：</view>
                <input class="nr" name="adminName" v-model="adminName" placeholder="请输入管理员姓名"></input>
              </view>
              <view class="form-item row">
                <view class="label nr">管理员手机号：</view>
                <input class="nr" name="adminMobile" v-model="adminMobile" placeholder="请输入管理员手机号"></input>
              </view>
              <view class="form-item row">
                <view class="label nr" style="width: 230rpx">管理员身份证号：</view>
                <input class="nr" name="adminIdCard" v-model="adminIdCard"
                       placeholder="请输入管理员身份证号码"></input>
              </view>
              <view class="form-item ">
                <view class="label nr" style="width: 500rpx;margin-bottom: 20rpx">管理员身份证照片
                  <text>(注：正反身份证)</text>
                </view>
                <view class="row card-images">
                  <uploader
                      preview-size="180rpx"
                      :mutiple="false"
                      :maxUpload="1"
                      :file-list="adminIdCardFrontFileList"
                      @after-read="afterReadAdminIdCardFront"
                      :deletable="true"
                      label="上传人像面"
                      image-fit="aspectFill"
                      @delete="onDeleteAdminIdCardFront"
                  />

                  <uploader
                      preview-size="180rpx"
                      :mutiple="false"
                      :maxUpload="1"
                      :file-list="adminIdCardBackFileList"
                      @after-read="afterReadAdminIdCardBack"
                      :deletable="true"
                      label="上传国徽面"
                      image-fit="aspectFill"
                      @delete="onDeleteAdminIdCardBack"
                  />
                </view>
              </view>
            </view>
          </view>
          <button class="apply-btn bg-primary white nr mt10 row-center br60" @click="formSubmit">
            立即申请
          </button>
        </form>
      </view>
      <!-- 申请状态 -->
      <view :hidden="vipState!=1" class="user-result-box">
        <view class="user-result column-center">

          <view class="user-result-content column-center">
            <image class="apply-result-img"
                   :src="applyObject.status == 2 ? '../../static/images/icon_payFail.png' : '/static/images/icon_paySuccess.png'"/>
            <view class="mt10 nr" style="line-height: 40rpx">{{ applyObject.status_str }}</view>
            <view class="apply-fail-reason sm" :style="applyObject == 2 ? 'visibility: none' : 'visibility: hidden'">
              {{ applyObject.reason }}
            </view>
          </view>
          <view class="user-result-info" v-if="applyObject.type == 1">
            <view class="info-item row nr">
              <view class="label">申请人资质：</view>
              <view class="info-text ml20">个人</view>
            </view>
            <view class="info-item row nr">
              <view class="label">申请人姓名：</view>
              <view class="info-text ml20">{{ applyObject.real_name }}</view>
            </view>
            <view class="info-item row nr">
              <view class="label">申请人手机号：</view>
              <view class="info-text ml20">{{ applyObject.phone }}</view>
            </view>
            <view class="info-item row nr">
              <view class="label">申请人邮箱：</view>
              <view class="info-text ml20">{{ applyObject.email }}</view>
            </view>
            <view class="info-item row nr">
              <view class="label">申请人地址：</view>
              <view class="info-text ml20">{{ applyObject.province }} {{ applyObject.city }}
                {{ applyObject.district }} {{ applyObject.address }}
              </view>
            </view>
            <view class="info-item row nr">
              <view class="label">身份证号：</view>
              <view class="info-text ml20">{{ applyObject.id_card }}</view>
            </view>
            <view class="info-item  nr">
              <view class="label">身份证照片：</view>
              <view class="id-card-images row">
                <image
                    v-if="applyObject.id_card_front"
                    :src="applyObject.id_card_front"
                    class="id-card-image"
                    mode="aspectFit"
                    @tap="previewImage(applyObject.id_card_front)"
                />
                <image
                    v-if="applyObject.id_card_back"
                    :src="applyObject.id_card_back"
                    class="id-card-image"
                    mode="aspectFit"
                    @tap="previewImage(applyObject.id_card_back)"
                />
              </view>
            </view>

          </view>
          <view class="user-result-info" v-if="applyObject.type == 2">
            <view class="info-item row nr">
              <view class="label">申请人资质：</view>
              <view class="info-text ml20">企业</view>
            </view>
            <view class="info-item row nr">
              <view class="label">企业名称：</view>
              <view class="info-text ml20">{{ applyObject.company_name }}</view>
            </view>
            <view class="info-item row nr">
              <view class="label">企业地址：</view>
              <view class="info-text ml20">{{ applyObject.province }} {{ applyObject.city }}
                {{ applyObject.district }} {{ applyObject.address }}
              </view>
            </view>
            <view class="info-item row nr">
              <view class="label">法人姓名：</view>
              <view class="info-text ml20">{{ applyObject.real_name }}</view>
            </view>
            <view class="info-item row nr">
              <view class="label">法人手机号：</view>
              <view class="info-text ml20">{{ applyObject.phone }}</view>
            </view>
            <view class="info-item row nr">
              <view class="label">管理员姓名：</view>
              <view class="info-text ml20">{{ applyObject.admin_name }}</view>
            </view>
            <view class="info-item row nr">
              <view class="label">管理员手机号：</view>
              <view class="info-text ml20">{{ applyObject.admin_phone }}</view>
            </view>
            <view class="info-item row nr">
              <view class="label">管理员身份证号：</view>
              <view class="info-text ml20">{{ applyObject.id_card }}</view>
            </view>
            <view class="info-item nr">
              <view class="label">营业执照：</view>
              <view class="business-license-image">
                <image
                    v-if="applyObject.business_license"
                    :src="applyObject.business_license"
                    class="license-image"
                    mode="aspectFit"
                    @tap="previewImage(applyObject.business_license)"
                />
              </view>
            </view>
            <view class="info-item nr">
              <view class="label">管理员身份证：</view>
              <view class="id-card-images row">
                <image
                    v-if="applyObject.id_card_front"
                    :src="applyObject.id_card_front"
                    class="id-card-image"
                    mode="aspectFit"
                    @tap="previewImage(applyObject.id_card_front)"
                />
                <image
                    v-if="applyObject.id_card_back"
                    :src="applyObject.id_card_back"
                    class="id-card-image"
                    mode="aspectFit"
                    @tap="previewImage(applyObject.id_card_back)"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 已申请 -->
    </view>
    <u-select v-model="showRegion" mode="mutil-column-auto" @confirm="regionChange" :list="regionLists"></u-select>
  </view>
</template>

<script>

import {applyService, applyServiceDetail, getPromoteHome, veryfiyDistribute} from "@/api/user";
import area from '@/utils/area'
import {uploadFile, copy} from '@/utils/tools'

export default {
  data() {
    return {
      idCardFrontFileList: [], // 身份证正面照片文件列表
      idCardBackFileList: [],  // 身份证反面照片文件列表

      // 企业申请相关字段
      businessLicenseFileList: [], // 营业执照文件列表
      adminIdCardFrontFileList: [], // 管理员身份证正面照片文件列表
      adminIdCardBackFileList: [],  // 管理员身份证反面照片文件列表

      fileList: [],
      showLoading: true,
      // 弹窗展示
      showPop: false,
      inviteCode: '',
      qualification: '1', // 默认为个人
      realName: '',
      mobile: '',
      email: '',
      address: '',
      idCard: '',
      companyName: '',
      companyAddress: '',
      legalPersonName: '',
      legalPersonMobile: '',
      adminName: '',
      adminMobile: '',
      adminIdCard: '',
      reason: '',
      region: '',
      // 省id
      provinceId: -1,
      // 市id
      cityId: -1,
      // 区ID
      districtId: -1,
      // 推销状态 0 ==> 未申请 1 ==> 申请进度 2 ==> 已申请
      vipState: 0,
      userInfo: {
        user: {},
        leader: {}
      },
      // 审核信息对象
      applyObject: {},
      // 邀请人状态
      inviteStatus: false,
      showRegion: false,
      regionLists: area,
      able_withdrawal: 0,
      history_earnings: 0,
      month_earnings: 0,
      today_earnings: 0,
      userFans: 0
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.showLoading = true
    this.veryfiyDistributeFun()
  },


  methods: {
    onInput(e) {
      this.inviteCode = e.detail.value
    },
    // 上传身份证正面照片
    afterReadIdCardFront(e) {
      const file = e;
      uni.showLoading({
        title: '正在上传中...',
        mask: true
      });
      file.map((item) => {
        uploadFile(item.path)
            .then((res) => {
              uni.hideLoading()
              this.idCardFrontFileList.push(res)
            })
            .catch(() => {
              uni.hideLoading()
              this.$toast({
                title: '上传失败'
              })
            })
      })
    },

    // 上传身份证反面照片
    afterReadIdCardBack(e) {
      const file = e;
      uni.showLoading({
        title: '正在上传中...',
        mask: true
      });
      file.map((item) => {
        uploadFile(item.path)
            .then((res) => {
              uni.hideLoading()
              this.idCardBackFileList.push(res)
            })
            .catch(() => {
              uni.hideLoading()
              this.$toast({
                title: '上传失败'
              })
            })
      })
    },

    // 删除身份证正面照片
    onDeleteIdCardFront(index) {
      this.idCardFrontFileList.splice(index, 1);
    },

    // 删除身份证反面照片
    onDeleteIdCardBack(index) {
      this.idCardBackFileList.splice(index, 1);
    },

    // 企业申请上传处理方法
    // 上传营业执照
    afterReadBusinessLicense(e) {
      const file = e;
      uni.showLoading({
        title: '正在上传中...',
        mask: true
      });
      file.map((item) => {
        uploadFile(item.path)
            .then((res) => {
              uni.hideLoading()
              this.businessLicenseFileList.push(res)
            })
            .catch(() => {
              uni.hideLoading()
              this.$toast({
                title: '上传失败'
              })
            })
      })

    },

    // 删除营业执照
    onDeleteBusinessLicense(index) {
      this.businessLicenseFileList.splice(index, 1);
    },

    // 上传管理员身份证正面照片
    afterReadAdminIdCardFront(e) {
      const file = e;
      uni.showLoading({
        title: '正在上传中...',
        mask: true
      });
      file.map((item) => {
        uploadFile(item.path)
            .then((res) => {
              uni.hideLoading()
              this.adminIdCardFrontFileList.push(res)
            })
            .catch(() => {
              uni.hideLoading()
              this.$toast({
                title: '上传失败'
              })
            })
      })
    },

    // 上传管理员身份证反面照片
    afterReadAdminIdCardBack(e) {
      const file = e;
      uni.showLoading({
        title: '正在上传中...',
        mask: true
      });
      file.map((item) => {
        uploadFile(item.path)
            .then((res) => {
              uni.hideLoading()
              this.adminIdCardBackFileList.push(res)
            })
            .catch(() => {
              uni.hideLoading()
              this.$toast({
                title: '上传失败'
              })
            })
      })
    },

    // 删除管理员身份证正面照片
    onDeleteAdminIdCardFront(index) {
      this.adminIdCardFrontFileList.splice(index, 1);
    },

    // 删除管理员身份证反面照片
    onDeleteAdminIdCardBack(index) {
      this.adminIdCardBackFileList.splice(index, 1);
    },
    afterRead(e) {
      const file = e
      uni.showLoading({
        title: '正在上传中...',
        mask: true
      })
      file.map((item) => {
        uploadFile(item.path)
            .then((res) => {
              uni.hideLoading()
              this.fileList.push(res)
            })
            .catch(() => {
              uni.hideLoading()
              this.$toast({
                title: '上传失败'
              })
            })
      })
    },
    // 申请成功数据
    getPromoteHomeFun() {
      getPromoteHome().then(res => {
        if (res.code == 1) {
          if (res.data.leader.length <= 0) {
            this.inviteStatus = false;
          } else {
            this.inviteStatus = true;
          }
          this.userInfo = res.data;
          this.userFans = res.data.fans
          this.able_withdrawal = res.data.able_withdrawal
          this.history_earnings = res.data.history_earnings
          this.month_earnings = res.data.month_earnings
          this.today_earnings = res.data.today_earnings
        }
      });
    },

    veryfiyDistributeFun() {
      veryfiyDistribute().then(res => {
        if (res.code == 10001) {
          this.vipState = 2
          // 获取详情
          this.getPromoteHomeFun();
          if (this.showLoading == true) {
            this.showLoading = false
          }
        } else if (res.code == 20001) {

          // 填写表单
          this.vipState = 0;

          this.applyVipDetailFun()
        } else if (res.code == 0) {
          // 返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        }
      })
    },

    // 最新分销会员申请详情
    applyVipDetailFun() {
      applyServiceDetail().then(res => {
        if (res.code == 1) {
          switch (res.data.is_verified) {
            case 0:
              //待审核
            case 2:
              // 审核不通过
              this.vipState = 1;
              this.applyObject = res.data
              break;
            case 1:
              this.getPromoteHomeFun();
              break;
          }
          if (this.showLoading == true) {
            this.showLoading = false
          }
        }
      });
    },

    reApply() {
      this.vipState = 0
    },

    regionChange(region) {
      this.region = region[0].label + " " + region[1].label + " " + region[2].label
      this.provinceId = region[0].value;
      ;
      this.cityId = region[1].value;
      this.districtId = region[2].value
    },

    formSubmit(e) {
      if (this.qualification === '1') {
        // 个人申请验证
        if (!this.realName) {
          this.$toast({title: "请填写姓名"});
          return;
        }

        if (!this.mobile) {
          this.$toast({title: "请填写手机号"});
          return;
        }

        if (!this.region.length) {
          this.$toast({title: "请选择省市区"});
          return;
        }

        if (!this.address) {
          this.$toast({title: "请填写详细地址"});
          return;
        }

        if (!this.idCard) {
          this.$toast({title: "请填写身份证号"});
          return;
        }
        // 获取身份证正反面照片URL
        let idCardFrontImage = this.idCardFrontFileList.map((item) => item.base_url);
        let idCardBackImage = this.idCardBackFileList.map((item) => item.base_url);

        if (idCardFrontImage.length === 0) {
          this.$toast({title: "请上传身份证正面照片"});
          return;
        }

        if (idCardBackImage.length === 0) {
          this.$toast({title: "请上传身份证反面照片"});
          return;
        }
        // 个人申请数据
        let data = {
          type: this.qualification,
          real_name: this.realName,
          phone: this.mobile,
          email: this.email,
          province: this.provinceId,
          city: this.cityId,
          district: this.districtId,
          address: this.address,
          id_card: this.idCard,
          id_card_front: idCardFrontImage[0], // 取第一张图片
          id_card_back: idCardBackImage[0]   // 取第一张图片
        };
        this.applyVipFun(data);
      } else {
        // 企业申请验证
        if (!this.companyName) {
          this.$toast({title: "请填写企业名称"});
          return;
        }

        if (!this.region.length) {
          this.$toast({title: "请选择省市区"});
          return;
        }

        if (!this.companyAddress) {
          this.$toast({title: "请填写详细地址"});
          return;
        }

        if (!this.legalPersonName) {
          this.$toast({title: "请填写法人姓名"});
          return;
        }

        if (!this.legalPersonMobile) {
          this.$toast({title: "请填写法人手机号"});
          return;
        }

        if (!this.adminName) {
          this.$toast({title: "请填写管理员姓名"});
          return;
        }

        if (!this.adminMobile) {
          this.$toast({title: "请填写管理员手机号"});
          return;
        }

        if (!this.adminIdCard) {
          this.$toast({title: "请填写管理员身份证号"});
          return;
        }

        let businessLicenseImage = this.businessLicenseFileList.map((item) => item.base_url);
        let adminIdCardFrontImage = this.adminIdCardFrontFileList.map((item) => item.base_url);
        let adminIdCardBackImage = this.adminIdCardBackFileList.map((item) => item.base_url);

        if (businessLicenseImage.length === 0) {
          this.$toast({title: "请上传营业执照"});
          return;
        }

        if (adminIdCardFrontImage.length === 0) {
          this.$toast({title: "请上传管理员身份证正面照片"});
          return;
        }

        if (adminIdCardBackImage.length === 0) {
          this.$toast({title: "请上传管理员身份证反面照片"});
          return;
        }

        // 企业申请数据
        let data = {
          type: this.qualification,
          company_name: this.companyName,
          province: this.provinceId,
          city: this.cityId,
          district: this.districtId,
          address: this.companyAddress,
          real_name: this.legalPersonName,
          phone: this.legalPersonMobile,
          admin_name: this.adminName,
          admin_mobile: this.adminMobile,
          id_card: this.adminIdCard,
          business_license: businessLicenseImage[0],
          id_card_front: adminIdCardFrontImage[0],
          id_card_back: adminIdCardBackImage[0]
        };
        this.applyVipFun(data);
      }
    },


    // 分销会员申请
    applyVipFun(data) {
      applyService(data).then(res => {
        if (res.code == 1) {
          this.$toast({
            title: res.msg
          });
          this.applyVipDetailFun();
        }
      });
    },


    textareaChange(e) {
      this.reason = e.detail.value
    },

    onClose() {
      this.showPop = false;
    },

    onCopy() {
      copy(this.userInfo.user.distribution_code)
    },
    previewImage(url) {
      if (url) {
        uni.previewImage({
          urls: [url]
        });
      }
    },
    // 显示提示窗口
    showToolTip(e) {
      this.animate("#today-profit");
    }
  }
}
</script>
<style lang="scss">
page {
  background-image: url("../../static/images/my_bg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;

  .user-spread {
    .explain {
      background-color: #FFFADE;
      padding: 18rpx 20rpx;
      color: #F95F2F;

      image {
        width: 24rpx;
        height: 24rpx;
        flex: none;
      }

      span {
        font-size: 20rpx;
        line-height: 30rpx;
      }
    }

    .header {
      background-image: url();
      background-repeat: no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      text-align: center;
      padding-top: 40rpx;
      height: 280rpx;

      .user-info {
        padding-left: 30rpx;

        .user-avatar {
          width: 110rpx;
          height: 110rpx;
          position: relative;

          .avatar-tag {
            position: absolute;
            bottom: -16rpx;
            width: 100%;
            background-color: #F79C0C;
            border: 1rpx solid #FFFFFF;
            border-radius: 100rpx;
            font-size: 22rpx;
            line-height: 30rpx;
          }
        }

        .user-message-container {
          .fans-type {
            margin-left: 12rpx;
            background-color: #291B06;
            padding: 4rpx 22rpx;
            border-radius: 100rpx;
            line-height: 30rpx;
          }

          .write-btn {
            height: 42rpx;
            width: 100rpx;
            margin-left: 30rpx;
            background-color: #FF838D;
          }
        }
      }
    }

    .main {
      padding: 0 20rpx;


      .user-vip {
        .user-assets-box {
          background-color: #fff;
          border-radius: 20rpx;
          padding: 10rpx 20rpx 22rpx;
          background: linear-gradient(90deg, #FBEFDB 0%, #FED09E 100%);

          .user-assets-header {
            border-bottom: 1rpx dashed #8F430E;
            padding-bottom: 4rpx;

            .primary-btn {
              height: 54rpx;
              border-radius: 120rpx;
              width: 144rpx;
              background: linear-gradient(180deg, #FF3067 0%, #FF2C3C 100%);
            }
          }

          .user-assets-content {
            margin-top: 30rpx;

            .user-item {
              flex: 1;
              position: relative;

              .user-assets-name {
                text-align: left;
                align-self: flex-start;
              }

              .assets {
                margin-top: 14rpx;
                text-align: left;
                align-self: flex-start;
              }

              // &:last-of-type .assets {
              //     align-self: center;
              //     margin-top: 14rpx;
              //     text-align: left;
              // }
            }
          }
        }

        .fans-msg-box {
          border-radius: 10rpx;
          line-height: 42rpx;

          .my-fans {
            width: 50%;
            height: 120rpx;
          }

          .line {
            width: 3rpx;
            height: 60rpx;
            background-color: #E5E5E5;
          }

          .invite-fans {
            width: 50%;
            height: 120rpx;
          }
        }

        .my-invite-box {
          padding: 26rpx 0 57rpx;
          border-radius: 10rpx;

          .invite-copy-btn {
            line-height: 30rpx;
            padding: 10rpx;
            background: linear-gradient(90deg, #FEE4B4 0%, #FBCB96 100%);
            color: #8F430E;
            border-radius: 4rpx;
          }

          .my-promote-banner {
            margin-top: 30rpx;
            height: 148rpx;
            width: 542rpx;
            border-radius: 10rpx;
          }
        }

        .usual-tools-box {
          border-radius: 10rpx;
          padding: 0 25rpx;

          .usual-tools-header {
            height: 100rpx;
            line-height: 44rpx;
            border-bottom: $-solid-border;
          }

          .usual-content {
            padding: 40rpx 0;

            .usual-item {
              width: 25%;

              .usual-item-img {
                width: 56rpx;
                height: 56rpx;
                flex: none;
              }

            }
          }
        }
      }

      .user-apply-box {
        .user-apply-vip {
          background-color: white;
          padding: 40rpx 0 0;
          border-radius: 20rpx;
          margin-bottom: 20rpx;

          .title {
            line-height: 30rpx;
            font-weight: bold;
          }

          .explain {
            margin-top: 20rpx;

            image {
              width: 24rpx;
              height: 24rpx;
              flex: none;
            }

            span {
              font-size: 20rpx;
              line-height: 30rpx;
            }
          }

          .vip-form {
            width: 100%;
            flex: 1;

            .form-item {
              padding: 20rpx 0 20rpx 0;
              border-bottom: $-solid-border;
              margin: 0 34rpx 30rpx;

              .label {
                width: 200rpx;
                line-height: 30rpx;

                text {
                  font-size: 18rpx;
                  color: #9b9b9b;
                }
              }

              input {
                flex: 1;
                font-size: 28rpx;
                margin-left: 10rpx;
                line-height: 28rpx;
                padding-right: 20rpx;
              }
            }
          }
        }

        .apply-vip-top {
          margin-bottom: 0;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }

        .apply-vip-bottom {
          padding-top: 0;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }

        .apply-btn {
          line-height: 30rpx;
          height: 82rpx;
        }
      }

      .user-result-box {
        .user-result {
          background-color: white;
          padding: 36rpx 14rpx 50rpx;
          border-radius: 20rpx;

          .user-result-header {
            .title {
              line-height: 30rpx;
              font-weight: bold;
            }

          }

          .user-result-content {
            padding: 60rpx 0 22rpx;
            /* margin: 0 8px; */
            width: 100%;
            border-bottom: $-solid-border;

            .apply-result-img {
              width: 100rpx;
              height: 100rpx;
            }
          }

          .user-result-info {
            margin-top: 42rpx;
            width: 100%;

            .info-item {
              margin-left: 60rpx;
              margin-bottom: 28rpx;
              line-height: 30rpx;

              .label {
                width: 200rpx;
              }
            }

            .id-card-images {
              margin-left: 60rpx;
              margin-top: 20rpx;
              gap: 20rpx;

              .id-card-image {
                width: 180rpx;
                height: 120rpx;
                border-radius: 10rpx;
                border: 1rpx solid #eee;
              }
            }

            .business-license-image {
              margin-left: 60rpx;
              margin-top: 20rpx;

              .license-image {
                width: 180rpx;
                height: 120rpx;
                border-radius: 10rpx;
                border: 1rpx solid #eee;
              }
            }
          }
        }

        .apply-btn {
          line-height: 30rpx;
          height: 82rpx;
        }

        .bg-gray {
          background-color: #CCCCCC;
        }
      }
    }
  }

  .main .van-cell {
    height: 100%;
    padding: 0;
  }

  .main .van-cell .van-cell__title {
    font-size: 30rpx;
    line-height: 30rpx;
    width: 150rpx;
    color: #333333;
  }

  van-field view {
    height: 100%;
  }

  van-field textarea {
    height: 100% !important;
  }

  .van-field__body--textarea, .van-field__input {
    margin-left: 15rpx;
  }

  .main .user-apply-box .apply-btn {
    line-height: 30rpx;
    height: 82rpx;
  }

  .main .user-result-box .user-result-content .apply-fail-reason {
    color: $-color-primary;
    line-height: 36rpx;
    margin-top: 10rpx;
  }

  /* 弹窗 */
  .inviteformContain {
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 30rpx;
    width: 580rpx;
    border-radius: 6rpx;
    background-color: $-color-white;
  }

  .inviteformContain .title {
    padding: 26rpx 0rpx;
  }

  .inviteformContain .modify-row {
    padding: 32rpx 0px;
    width: 100%;
    border-bottom: 1rpx solid #E5E5E5;
  }

  .inviteformContain .btn {
    height: 80rpx;
    padding: 0 180rpx;
    border-radius: 10rpx;
    margin-top: 60rpx;
  }

  .card-images {
    gap: 20rpx;
  }


}
</style>